<template>
    <view class="content">
        <Header></Header>
        <view class="tar">
            <view class="sys">
                <view class="sys-title">
                    浮城
                    <view class="decora"></view>
                </view>
                <view class="send">
                    爱生活，爱自己!
                </view>
            </view>
            <u-avatar :src="userInfo.avatar" size="129.5rpx" @click="login"></u-avatar>
        </view>
        <view class="userInfo">
            <view class="item">
                <view class="val">{{ userInfo.collect_books }}</view>
                <view class="txt">我的书籍</view>
            </view>
            <view class="item">
                <view class="val">{{ userInfo.comment }}</view>
                <view class="txt">评论</view>
            </view>
            <view class="item">
                <view class="val">{{ userInfo.balance }}</view>
                <view class="txt">账户余额</view>
            </view>
        </view>
        <vipCard :params="vipInfo"></vipCard>
        <view class="detail">
            <view class="item" v-for="item in detailList" :key="item.id">
                <view>
                    <img :src="item.img" alt="">{{ item.text }}
                </view>
                <u-icon name="arrow-right" color="#000" size="22.5rpx"></u-icon>
            </view>
        </view>
        <u-modal :show="showTip" content='是否前往登录?' :showCancelButton="true" @confirm="toLogin"
            @cancel="() => { showTip = false }"></u-modal>
    </view>
</template>

<script setup lang="ts">
import { ref , reactive } from 'vue'
import { onShow } from "@dcloudio/uni-app";
import Header from './header.vue';
import vipCard from '@/components/vipCard.vue'
import { getUserInfo } from '@/api/mine/mine'
import type { userBaseInfo , userVipInfo } from '@/model/api/user'
import ENV from '@/utils/env'

const showTip = ref(false)

let userInfo: userBaseInfo = reactive({
    collect_books: 0,
    comment: 0,
    balance: 0,
    avatar: ''
}) 
let vipInfo:userVipInfo = reactive({
    vip_grade_text: '非会员',
    btn_text: '充值',
    vip_status: '待激活',
    login_days: 0,
    total_amount: 0
})
const detailList = reactive([
    {
        id: 1,
        img: '../../static/system/bankcard.png',
        text: '我的账户'
    },
    {
        id: 2,
        img: '../../static/system/vips.png',
        text: '我的VIP'
    },
    {
        id: 3,
        img: '../../static/system/attention.png',
        text: '我的关注'
    },
    {
        id: 4,
        img: '../../static/system/info.png',
        text: '关于我们'
    },
])

const login = () => {
    uni.getStorage({
        key: 'user_token',
        success: (res) => {
            return
        },
        fail: (err) => {
            showTip.value = true
        }

    })
}
const toLogin = () => {
    uni.navigateTo({
        url: "/pages/login/login"
    })
    showTip.value = false
}

const requestUserInfo = () => {
    getUserInfo().then((res: any) => {
        if (res.code == 200) {
            if(res.data.userBaseInfo.avatar){
                res.data.userBaseInfo.avatar = ENV.serverUrl + res.data.userBaseInfo.avatar
            }
            Object.assign(userInfo, res.data.userBaseInfo)
            Object.assign(vipInfo, res.data.vipInfo)
        }
    })
}

const initUserInfo = ()=>{
    uni.getStorage({
        key: 'user_token',
        success: () => {
            if(!userInfo.avatar){
                requestUserInfo()
            }
        },
        fail:()=>{
            Object.assign(userInfo,{
                collect_books: 0,
                comment: 0,
                balance: 0,
                avatar: ''
            })
            Object.assign(vipInfo,{
                vip_grade_text: '非会员',
                btn_text: '充值',
                vip_status: '待激活',
                login_days: 0,
                total_amount: 0
            })
        }
    })
}

onShow(()=>{
    initUserInfo()
})
</script>

<style lang="scss" scoped>
.tar {
    width: calc(100% - 55.5rpx);
    height: calc(185rpx - 55.5rpx);
    padding: 27.75rpx;
    display: flex;
    justify-content: space-between;

    .sys {
        width: 240rpx;
        max-width: 407rpx;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-around;

        .sys-title {
            font-size: 40.7rpx;
            font-weight: bold;
            width: auto;
            position: relative;

            .decora {
                position: absolute;
                width: 100rpx;
                border-bottom: 22.2rpx solid #80e699;
                bottom: 12rpx;
                z-index: -100;
            }
        }

        .send {
            font-size: 26rpx;
        }
    }
}

.userInfo {
    width: calc(100% - 55.5rpx);
    height: 101.75rpx;
    padding: 0rpx 27.75rpx;
    display: flex;
    justify-content: space-around;
    margin: 27.75rpx 0rpx;

    .item {
        min-width: 111rpx;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        text-align: center;

        .val {
            font-size: 44.4rpx;
            font-weight: bold;
        }

        .txt {
            font-size: 25.9rpx;
        }
    }
}



.detail {
    width: calc(100% - 27.75rpx);
    height: 400rpx;
    margin-top: 37rpx;
    border-top: 1rpx solid #f2f2f2;

    .item {
        width: calc(100% - 27.75rpx);
        margin-left: 27.75rpx;
        height: 92.5rpx;
        line-height: 92.5rpx;
        font-size: 22.5rpx;
        display: flex;
        justify-content: space-between;

        img {
            height: 33.3rpx;
            margin-right: 18.5rpx;
            position: relative;
            top: 8rpx;
        }
    }
}
</style>